<template>
    <el-form :model="userFollowUpAdd" label-width="120px" :rules="rules">

<el-form-item label="客户" prop="customerId">
  <el-select v-model="userFollowUpAdd.customerId" placeholder="请选择客户" style="width: 100%;">
    <el-option v-for="item in userListInfo" :label="item.label" :value="item.value" :key="item.value"/>
  </el-select>
</el-form-item>

<el-form-item label="跟进方式" prop="connectWay">
  <el-select v-model="userFollowUpAdd.connectWay" placeholder="请选择跟进方式" style="width: 100%;">
    <el-option label="电话" value="1" />
    <el-option label="短信" value="2" />
    <el-option label="实物邮件" value="3" />
    <el-option label="当面" value="4" />
  </el-select>
</el-form-item>

<el-form-item label="跟进时间" prop="followUpTime">
    <el-date-picker
      v-model="userFollowUpAdd.followUpTime"
      type="datetime"
      style="width: 100%"
    />
</el-form-item>

<el-form-item label="跟进内容" prop="remark">
  <el-input v-model="userFollowUpAdd.remark" type="textarea"/>
</el-form-item>

<el-form-item label="上传图片">
  <el-upload
v-model:file-list="userFollowUpAdd.imgs"
action="/api/upload/files"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
>
<el-icon><Plus /></el-icon>
</el-upload>

<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl"/>
</el-dialog>
</el-form-item>
</el-form>
</template>
<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import {ref,reactive} from "vue"

defineProps({
    userListInfo: {
        type: Array<any>,
        required: true
    }
})
// 将数据传递给父组件，由父组件去发送请求
const userFollowUpAdd = reactive({
  customerId: "",
  connectWay: "",
  followUpTime: "",
  remark: "",
  connectUrls: '',
  imgs :[]
})
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handlePictureCardPreview=(uploadFile:any)=>{
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
const rules = reactive<any>({
  user: [
    {
      required: true,
      message: '客户不能为空',
      trigger: 'change',
    },
  ],
  followUpMethods: [
    {
      required: true,
      message: '跟进方式不能为空',
      trigger: 'change',
    },
  ],
  followUpDate: [
    {
      type: 'date',
      required: true,
      message: '跟进时间不能为空',
      trigger: 'change',
    },
  ]
})
defineExpose({
  userFollowUpAdd
})
</script>

<style scoped>

</style>